<template>
	<div>
		<el-form
		style="margin-top:20px;"
		    :model="ruleForm"
		    ref="ruleForm"
		    :rules="rules"
		    :label-position="labelPosition"
		    label-width="120px"
		    class="demo-ruleForm "
		>
		    <el-row class="container">
				<el-page-header @back="goback" content="出场">
				</el-page-header>
		        <el-col :span="12" style="margin-top:20px;">
					<el-form-item label="养殖批号：" prop="breedBatch">
					    <el-input placeholder="" disabled v-model="ruleForm.breedBatch" style="width: 300px"></el-input>
					</el-form-item>
		            <el-form-item label="客户：" prop="type">
		                <template>
		                    <el-select
		                        v-model="customer"
								@change="chooseCustomer"
		                        style="width:300px"
								value-key="id"
		                        placeholder="请选择"
		                    >
		                        <el-option
		                            v-for="item in customerList"
		                            :key="item.id"
		                            :label="item.clientName"
		                            :value="item"
		                        ></el-option>
		                    </el-select>
		                </template>
		            </el-form-item>
					<el-form-item label="出场批号：" prop="outBatch">
					    <el-input placeholder="请输入" v-model="ruleForm.outBatch" style="width: 300px">
					        <template slot="append">
								<el-button @click="addBatch">自动生成</el-button>
					        </template>
					    </el-input>
					</el-form-item>
		        </el-col>
		        <el-col :span="10" style="margin-top:20px;">
					<el-form-item label="剩余数量：" prop="number">
					    <el-input placeholder="" disabled v-model="number" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="出场日期：">
					    <el-date-picker
					        v-model="ruleForm.outTime"
					        type="date"
					        value-format="yyyy-MM-dd"
					        placeholder="请选择"
					        style="width:300px"
					    ></el-date-picker>
					</el-form-item>
					<el-form-item label="出场负责人：" prop="type">
					    <template>
					        <el-select
					            v-model="principal"
								@change="choosePrincipal"
								value-key="id"
					            style="width:300px"
					            placeholder="请选择"
					        >
					            <el-option
					                v-for="item in userList"
					                :key="item.id"
					                :label="item.name"
					                :value="item"
					            ></el-option>
					        </el-select>
					    </template>
					</el-form-item>
		        </el-col>
				<el-col>
					<el-form-item label="编号类型：">
						<el-radio-group v-model="ruleForm.type" @change="gettype">
						    <el-radio label="RFID" border>RFID</el-radio>
						    <el-radio label="养殖批号" border>养殖批号</el-radio>
						</el-radio-group>
					</el-form-item>
					
					<el-form-item label="RFID：" v-if="ruleForm.type == 'RFID'">
						<el-input placeholder="请输入" v-model="code" style="width: 300px">
							<template slot="append">
								<el-button @click="out">添加</el-button>
							</template>
						</el-input>
					</el-form-item>
					<el-table
						:data="tableData"
						border
						style="margin-top:20px;"
						ref="multipleTable"
						header-cell-class-name="table-header"
					>
						<el-table-column prop="time" sortable label="导入时间"></el-table-column>
						<el-table-column prop="seedName" sortable label="品种名称"></el-table-column>
						<el-table-column prop="batch" sortable label="养殖批号"></el-table-column>
						<el-table-column prop="type" sortable label="编号类型"></el-table-column>
						<el-table-column prop="code" sortable label="编号"></el-table-column>
						<el-table-column prop="sex" sortable label="性别">
							<template slot-scope="scope">
								<el-select v-model="scope.row.sex" placeholder="请选择">
								    <el-option
								      v-for="item in sexlist"
								      :key="item.value"
								      :label="item.value"
								      :value="item.value">
								    </el-option>
								 </el-select>
							</template>
						</el-table-column>
						<!-- <el-table-column prop="buyTime" label="操作" width="150" align="center">
							<template slot-scope="scope">
								<el-button
									type="text"
									style="color: red;"
									@click="handleDelete(scope.$index, scope.row)"
								>删除</el-button>
							</template>
						</el-table-column> -->
					</el-table>
				</el-col>
		    </el-row>
		    <el-form-item class="footerFixed" label-width="0px">
		        <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
		        <el-button @click="goback">取消</el-button>
		    </el-form-item>
		</el-form>
	</div>
</template>

<script>
import { out_findById,out_findByTypeAndCode,out_save,born_findByBatch } from '@/request/breedApi';
import { user_findByAll,client_findByAll } from '@/request/api';
	export default{
		data(){
			return{
				customer:"",
				principal:"",
				code:"",
				number:"",
				tableData:[],
				codeList:[],
				labelPosition:'right',
				ruleForm:{
					"breedBatch":"",
					"outBatch":"",
				},
				userList:[],
				rules:{},
				customerList:[],
				currentPage:1,
				total:0,
				pagesize:10,
				sexlist:[
					{value:"雌"},
					{value:"雄"}
				],
			}
		},
		mounted() {
			this.init();
			this.number = this.$route.query.number;
			this.ruleForm.breedBatch = this.$route.query.breedBatch;
			this.ruleForm.breedId = this.$route.query.id;
		},
		methods:{
			gettype(){
				this.tableData = []
				this.code = ""
				if(this.ruleForm.type == "养殖批号"){
					born_findByBatch(this.ruleForm.breedBatch +"?isout=1").then((res)=>{
						this.tableData = res.data
					})
				}
			},
			init() {
				user_findByAll("").then((res) => {
					this.userList = res.data;
				});
				client_findByAll("").then((res) => {
					this.customerList = res.data;
				});
			},
 			// 返回上一页
			goback(){
				this.$router.go(-1)
			},
			// 删除
			handleDelete(index,row){
				
			},
			
			handleCurrentChange(val) {
			    this.currentPage = val;
			    
			},
			//改变负责人时触发
			choosePrincipal(ele) {
				this.ruleForm.principalId = ele.id;
				this.ruleForm.principalName = ele.name;
			},
			//改变客户时触发
			chooseCustomer(ele) {
				this.ruleForm.customerId = ele.id;
				this.ruleForm.customer = ele.clientName;
			},
			//随机生成出场批次
			addBatch() {
				var d = new Date();
				var curr_date = d.getDate();
				var curr_month = d.getMonth() + 1; 
				var curr_year = d.getFullYear();
				String(curr_month).length < 2 ? (curr_month = "0" + curr_month): curr_month;
				String(curr_date).length < 2 ? (curr_date = "0" + curr_date): curr_date;
				var yyyyMMdd = curr_year + "" + curr_month +""+ curr_date;
				this.ruleForm.outBatch = yyyyMMdd + Math.ceil(Math.random()*10000);
			},
			//出场码查询
			out() {
				//调用方法
				var params = {
					"type": this.ruleForm.type,
					"code": this.code,
					"batch": this.$route.query.breedBatch
				}
				out_findByTypeAndCode(params).then((res) => {
					if (res.code == 200) {
						this.tableData.push(res.data);
						this.codeList.push(this.code);
					}
					this.code = "";
				});
			},
			//出场
			submitrule() {
				if (this.$route.query.number == 0) {
					this.$notify({
						title: '提示',
						message: '剩余数量为0，不能出场',
						type: 'info',
						duration:1000
					});
					return;
				}

				this.ruleForm.outDetailList = this.tableData;
				this.ruleForm.codeList = this.codeList;
				out_save(this.ruleForm).then((res) => {
					if (res.code == 200) {
						this.$notify({
                            title: '提示',
                            message: '保存成功',
                            type: 'success',
                            duration:1000
                        });
						this.goback()
					}
				});
			}
			
		}
	}
</script>

<style scoped>
	.el-pagination{
	    text-align: center;
	}
</style>
